<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程</title>
<style>
    div{
        border: 3px solid #4CAF50;
        padding: 5px;
    }
    .img1{
        float: right;
    }
    .clearfix{
        overflow: auto;
    }
    .img2{
        float: right;
    }
    </style>
    </head>
    <body>
        <p>以下实例图在父元素中溢出，很不美观：</p>
        <div>
            <img class="img1" src="https://www.runoob.com/try/demo_source/pineapple.jpg" alt="pineapple" width="170" height="170">
            菜鸟教程-学的不仅是技术，更是梦想！！！</div>
            <p style="clear: right;">在父元素上通过添加clearfix类，并设置overflow：auto；来解决问题</p>
            <div class="clearfix">
                <img class="img2" src="https://www.runoob.com/try/demo_source/pineapple.jpg" alt="pineapple" width="170" height="170">
                菜鸟教程-学的不仅是技术，更是梦想！！！</div>
    </body>
    </html>
